<template>
     <div class="mapWrapper">
      <!-- <a-button type="primary" @click="goBack">返回上级</a-button> -->
      <div ref="map" style="height: 100%; width: 100%" id="map"></div>
   </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// const router = useRouter();
const mapChartRef = ref();
const initChinaMap = ref();
const initAdCode = ref(141000); // 默认中国地图的编码
const currentMapName = ref("中国"); // 默认地图的名称
const mapList = ref([]); // 当前展示的省市区所有数据
const historyInfo = ref([]); // 记录历史点击的省市区，用于返回查询 
import linfen from '../map/141000.json'

onMounted(()=>{

   let myChart = echarts.init(document.getElementById('map'));
var splitList = [{start: 1, end: 1, label: '永和县', color: 'rgb(69,228,117)'},
{start: 2, end: 2, label: '侯马市', color: 'rgb(75,239,125)'},
{start: 3, end: 3, label: '大宁县', color: 'rgb(254,205,164)'},
{start: 4, end: 4, label: '吉县', color: 'rgb(114,212,254)'},
{start: 5, end: 5, label: '乡宁县', color: 'rgb(255,209,118)'},
{start: 6, end: 6, label: '襄汾县', color: 'rgb(197,143,255)'},
{start: 7, end: 7, label: '曲沃县', color: 'rgb(255,171,147)'},
{start: 8, end: 8, label: '翼城县', color: 'rgb(255,210,145)'},
{start: 9, end: 9, label: '浮山县', color: 'rgb(147,206,255)'},
{start: 10, end: 10, label: '安泽县', color: 'rgb(79,244,128)'},
{start: 11, end: 11, label: '古县', color: 'rgb(255,207,117)'},
{start: 12, end: 12, label: '霍州市', color: 'rgb(181,165,255)'},
{start: 13, end: 13, label: '洪洞县', color: 'rgb(249,173,255)'},
{start: 14, end: 14, label: '蒲县', color: 'rgb(172,167,255)'},
{start: 15, end: 15, label: '汾西县', color: 'rgb(39,213,255)'},
{start: 16, end: 16, label: '尧都区', color: 'rgb(74,236,122)'},
{start: 17, end: 17, label: '隰县', color: 'rgb(253,194,113)'}]
// myChart.showLoading();
    echarts.registerMap('linfen', linfen);
    var geoCoordMap = {}
    var dataTooltip = [{name: '永和县', selected: false, value: 1},
{name: '侯马市', selected: false, value: 2},
{name: '大宁县', selected: false, value: 3},
{name: '吉县', selected: false, value: 4},
{name: '乡宁县', selected: false, value: 5},
{name: '襄汾县', selected: false, value: 6},
{name: '曲沃县', selected: false, value: 7},
{name: '翼城县', selected: false, value: 8},
{name: '浮山县', selected: false, value: 9},
{name: '安泽县', selected: false, value: 10},
{name: '古县', selected: false, value: 11},
{name: '霍州市', selected: false, value: 12},
{name: '洪洞县', selected: false, value: 13},
{name: '蒲县', selected: false, value: 14},
{name: '汾西县', selected: false, value: 15},
{name: '尧都区', selected: false, value: 16},
{name: '隰县', selected: false, value: 17},
];


    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

   let option = {
      //   backgroundColor: '#000000',
        title: {
            show: false,
        },
        legend:{
            show: false
        },
        tooltip: { //提示框组件
            trigger: 'item', //触发类型：数据项图形触发
            formatter: function(params) {
                if (typeof(params.value)[2] == "undefined") {
                    return params.name;
                } else {
                    return params.name + ' : ' + params.value[2] + '%';
                }
            }
        }, //提示框浮层内容格式器
        visualMap: { //视觉映射组件
            show: false, //否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
            max: 100, //指定 visualMapContinuous 组件的允许的最大值
            seriesIndex: [1], //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
            inRange: { //定义 在选中范围中 的视觉元素
                color: ['#00467F', '#A5CC82'] // 蓝绿
            }
        },
        geo: {
            show: true, //是否显示
            map: 'linfen', //地图类型
            aspectScale: 1, // 地图倾斜度
            zoom: 1.25, // 地图放大倍数
            label: { //图形上的文本标签，说明图形的数据信息，比如值，名称
                normal: {
                    show: false, //是否在普通状态下显示标签
                },
                emphasis: { //是否在高亮状态下显示标签
                    show: false
                }
            },
            roam: true, //是否开启鼠标缩放和平移漫游
            itemStyle: {
                normal: {
                  //   borderColor: "#55AB1C",
                    borderWidth: 4,
                    shadowColor: "#55AB1C",
                    shadowBlur: 1, // 阴影的模糊大小
                    shadowOffsetX: 2, // 阴影水平方向上的偏移距离
                    shadowOffsetY: 16, // 阴影垂直方向上的偏移距离
                },
                emphasis: {
                   
                  //   areaColor: '#3fdaff', //hover高亮时的颜色
                  //   areaColor: '#E6F1FF', //hover高亮时的颜色
                }
            },

        },
        dataRange:{
            x: '-1000 px', //图例横轴位置
            y: '-1000 px', //图例纵轴位置
          splitList: splitList
        },
        series: [{
            type: 'map',
            map: 'linfen',
            geoIndex: 1,
            aspectScale: 1, //长宽比
            zoom: 1.25,
            // top: '10%',
            // left: '17%',
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                 
                }
            },
            itemStyle: {
               //  normal: {
               //      borderColor: '#00eaff',
               //      borderWidth: 1,
               //      areaColor: '#CE5F5F'
               //  },
                emphasis: {
                  
                }
            },
            zlevel: 1,
            roam: true,
            animation: true,
            data: dataTooltip,

        },
]
    };
    myChart.setOption(option);
})


</script>

<style lang="scss" scoped>
    .mapWrapper {
   width: 100%;
   height: 100%;
   padding: 10px;
   background-color: rgb(255,255,255,0);
   /* border: 1px dashed orange; */
}
</style>